<template>
	<div class="s-canvas">
		<canvas ref="canvasRef" :width="contentWidth" :height="contentHeight"></canvas>
	</div>
</template>
<script setup lang="ts">
import { defineProps, onMounted, watch, ref } from 'vue';
const canvasRef = ref();
const props = defineProps({
	identifyCode: {
		type: String,
		default: '1234',
	},
	fontSizeMin: {
		type: Number,
		default: 16,
	},
	fontSizeMax: {
		type: Number,
		default: 30,
	},
	backgroundColorMin: {
		type: Number,
		default: 255,
	},
	backgroundColorMax: {
		type: Number,
		default: 255,
	},
	colorMin: {
		type: Number,
		default: 0,
	},
	colorMax: {
		type: Number,
		default: 255,
	},
	inlineCodeMin: {
		type: Number,
		default: 100,
	},
	inlineCodeMax: {
		type: Number,
		default: 255,
	},
	dotColorMin: {
		type: Number,
		default: 0,
	},
	dotColorMax: {
		type: Number,
		default: 255,
	},
	contentWidth: {
		type: Number,
		default: 112,
	},
	contentHeight: {
		type: Number,
		default: 40,
	},
});

const randomNum = (min: number, max: number) => {
	return Math.floor(Math.random() * (max - min) + min);
};
const randomColor = (min: number, max: number) => {
	const r = randomNum(min, max);
	const g = randomNum(min, max);
	const b = randomNum(min, max);
	return `rgb(${r}, ${g}, ${b})`;
};
const drawPic = () => {
	console.log('===drawPic');
	// let canvas =  document.getElementById('s-canvas');
	let ctx = canvasRef.value.getContext('2d');
	ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
	ctx.textBaseline = 'bottom';
	// 绘制背景
	ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax);
	ctx.fillRect(0, 0, props.contentWidth, props.contentHeight);
	// 绘制文字
	for (let i = 0; i < props.identifyCode.length; i++) {
		drawText(ctx, props.identifyCode[i], i);
	}
	// 绘制干扰点
	drawDot(ctx);
	// 绘制干扰线
	drawLine(ctx);
};
const drawText = (ctx, txt, i) => {
	ctx.fillStyle = randomColor(props.colorMin, props.colorMax);
	ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + 'px SimHei';
	let x = (i + 1) * (props.contentWidth / (props.identifyCode.length + 1));
	let y = randomNum(props.fontSizeMax, props.contentHeight - 5);
	let deg = randomNum(-10, 10);
	// 修改坐标原点和旋转角度
	ctx.translate(x, y);
	ctx.rotate((deg * Math.PI) / 180);
	ctx.fillText(txt, 0, 0);
	// 恢复坐标原点和旋转角度
	ctx.rotate((-deg * Math.PI) / 180);
	ctx.translate(-x, -y);
};
const drawLine = (ctx) => {
	//绘制干扰线
	for (let i = 0; i < 5; i++) {
		ctx.strokeStyle = randomColor(props.colorMin, props.colorMax);
		ctx.beginPath();
		ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
		ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
		ctx.stroke();
	}
};
const drawDot = (ctx) => {
	//绘制干扰点
	for (let i = 0; i < 5; i++) {
		ctx.fillStyle = randomColor(props.dotColorMin, props.dotColorMax);
		ctx.beginPath();
		ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI);
		ctx.fill();
	}
};
onMounted(() => {
	drawPic();
});
watch(
	() => props.identifyCode,
	() => {
		drawPic();
	}
);
</script>
